<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<style>
    .Basic{
        border: 1px;
        width: 100%;
        height: 100px;
    }
    
    .Happy{
        background-color: yellow;
    }

    .Sad{
        background-color: gray;
    }

    .Pain{
        background-color: black;
    }

    .Name1{
        background-color: blueviolet;
    }

    .Name2{
        font-size: 25px;;
    }

    .Name3{
        border-radius: 5px;;
    }
</style>
<body>

    <!--
        绑定样式:
        1.类样式
            写法:class-"xxx”  xxx可以是字符串、对象、数组。
            字符串写法适用于:类名不确定，要动态获取。
            对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
            数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
        2.style样式:
            :style="{字体大小:xxx}"其中xxx是动态值。
            :style="【a，b】"其中a、b是样式对象。 
     -->
    <div id="app">
        <!-- 绑定class适用于 类名不确定的情况 -->
        <div class="Basic" :class="color1" @click="changeColor">
            <span>测试1</span>
        </div>

        <!-- 绑定class适用于 样式个数不确定，类名不确定的情况 -->
        <div class="Basic" :class="arr">
            <span>测试2</span>
        </div>

        <!-- 绑定class适用于 样式个数确定，类名确定，但是不知道具体用哪个的情况 -->
        <div class="Basic" :class="arrObj">
            <span>测试3</span>
        </div>

        <!-- 绑定style 对象绑定  -->
        <div class="Basic" :style="styleObj">
            <span>测试3</span>
        </div>

        <!-- 绑定style 数组绑定   -->
        <div class="Basic" :style="arrStyleObj">
            <span>测试3</span>
        </div>

 

    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
           color1:'Sad',
           arr:["Name1","Name2","Name3"],
           arrObj:{
                "Name1":true,
                "Name2":false
           },
           styleObj:{
                 "background-color":"red",
                 "font-size":"15px"
           },
           arrStyleObj:[
                {
                    "font-size":"25px"
                },
                {
                    "background-color":"blue",
                }
            ]
           
        },
        methods:{
            changeColor(){
                //this.color1 = "Pain"
                const list = ['Happy','Sad','Pain'];
                var number = Math.floor(Math.random()*3)
                this.color1 = list[number]
            }
        }
    })
</script>
</html>